// 药房管理
<template comments>
  <div class="pharmacy">
    <TopManu :signOut="true" @handleQuit="$router.go(-1)"></TopManu>
   
    <div class="search">
      <div class="s1">
        <el-input
          v-model="params.keyword"
          placeholder="请输入名称"
        ></el-input>
        <el-button @click="searchB()" class="butB_Sel">查询</el-button>
          <el-button @click="resetSearchB()" class="butB_Reset">重置</el-button>
      </div>
      <div class="selectBai">
        <div>
          <el-select v-model="params.species_id" placeholder="药品种类" @change="searchB">
            <el-option
              v-for="item in speciesList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
         <div>
          <el-select v-model="params.category_id" placeholder="药品分类" @change="searchB">
            <el-option
              v-for="item in drugList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        
      </div>
    </div>

    <div class="tablesB">
      <el-table  v-loading="params.loading" :data="data" border >
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in $baseBai['pharmacy_STOCK_list']">

             <el-table-column :width="item.width" v-if="item.prop == 'member.gender'" :prop="item.prop" :label="item.label" :key="index">
                        <template slot-scope="scope">
                            <div v-if="scope.row.member">{{ $baseBai['gender'][scope.row.member.gender-1].label }}</div>
                        </template>
              </el-table-column>
            <el-table-column v-else :width="item.width" :prop="item.prop" :label="item.label" :key="index+item"> </el-table-column>
           </template>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                class="butB_Det"
                @click="handleEdit(scope.$index, scope.row, 1)"
                >详情</el-button
              >
             
            </div>
          </template>
        </el-table-column>
      </el-table>
        <div>
           <el-pagination
           class="fenye"
            :background="true"
            :current-page="params.page"
            :page-size="params.limit"
            layout="prev, pager, next"
            @current-change="handlePagination"
            :total="params.pageCount">
            </el-pagination>
      </div>
    </div>


      <el-dialog
        :title="dialogTitle"
        :destroy-on-close="true"
        :visible.sync="MZ_Detail_Show"
        
        v-if="MZ_Detail_Show"
        width="30%"
        :before-close="()=>{this.MZ_Detail_Show=!this.MZ_Detail_Show}">
             <MZdetail :dialogTitle='dialogTitle' :that='this'></MZdetail>
      
      </el-dialog>
  </div>
</template>

<script>
let t;
import MZdetail from './common/detail'
import TopManu from "@/components/TopMenu";
import { mapState,mapActions } from "vuex";
// getDict_dataKuFangList
export default {
  name:"pharmacy_STOCK",
  data() {
    return {
      MZ_Detail_Show:false,
      tableTitle: [],
      dialogTitle:'',
      params: {
        loading:false,
      
        page:1,
        limit:10,
        category_id:'',
        species_id:'',
        keyword: "",
       
         pageCount:0,
      },
      id:'',
    
      data: [],
    };
  },
  components: {
    TopManu,
    MZdetail,
  },
   computed: {
    ...mapState({
      KuFangList: state => state.dictBai.KuFangList,
      drugList: state => state.dictBai.drugList,
      speciesList: state => state.dictBai.speciesList,
    }),
  },
  mounted() {
    t = this;
    t.tableTitle = t.$baseBai["pharmacy_MZ_list1"];

    if(t.KuFangList.length==0){
        t['dictBai/getDict_dataKuFangList']({})
    }

    if(t.drugList.length==0){
       t['dictBai/getDrugCategoryIndex']({})
    }
    if(t.speciesList.length==0){
       t['dictBai/getDrugDrugSpeciesIndex']({})
    }

      t.getList()
   
  },
  methods: {
     ...mapActions([
				'dictBai/getDict_dataKuFangList',
        'pharmacy_MZ/getDrugItem',
        'pharmacy_MZ/getDrugFillNum',
        'pharmacy_MZ/getStoreDrugNumShow',
        'dictBai/getDrugCategoryIndex',
        'dictBai/getDrugDrugSpeciesIndex'
        
       
			]),
       resetSearchB(){
       this.params={
          loading:false,
      
        page:1,
        limit:10,
        category_id:'',
        species_id:'',
        keyword: "",
       
         pageCount:0,
            } 
      this.getList()
      },
    handleEdit(...item){
      
        t.id=item[1].id;
        t.dialogTitle='详情信息'
         t['pharmacy_MZ/getStoreDrugNumShow']({id:item[1].id,house_id: t.$route.query.house_id}).then(res=>{
            if(res.code==200){t.MZ_Detail_Show=!t.MZ_Detail_Show;}
        })
     
     
     // t['pharmacy_MZ/getDrugItem']({})
    //  t.MZ_Detail_Show=!t.MZ_Detail_Show;
    },
    tabsIndexClick(tab, event) {
       let t=this;
     
       this.params={
        loading:false,
        tabIndex: t.params.tabIndex,
        page: t.params.page,
        limit:t.params.limit,
        value1: "",
        keyword: "",
        start_time: "",
        pageCount:0,
        
      }
      t.data=[];
        t.getList()
    },
    
    searchB() {
      console.log(123)
      t.params.page=1;
      t.getList()
    },

 
     handlePagination(e){
       
         t.params.page=e;
        t.getList()
        
    },
    getList(){
     
      let d={
        keyword:t.params.keyword,
        limit:t.params.limit,
        page:t.params.page,
        house_id: t.$route.query.house_id,
        status:t.params.tabIndex,
        species_id:t.params.species_id,
        category_id:t.params.category_id,
        
        useful_day:'',
      }
      t.data=[];
       this.params.loading=true;
      this['_API'].getStoreIndex(d).then(res=>{
         this.params.loading=false;
                 if(res.code==200){
                   
                     
                        this.data=res.data.list;
                        this.params.pageCount =res.data.count;
                       
                 }
      })
      
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav {
  
  .el-tabs__item {
    border-bottom: 1px solid #e4e7ed;
  }
  .is-active {
    color: #02bf6b;
  }
  .el-tabs__item:hover {
    color: #02bf6b;
  }
}
.search {
  border: 1px solid #f2f2f2;
  margin: 10px 2%;
  padding: 20px;
  border-radius: 10px;
  .s1 {
    width: 400px;
    display: flex;
    button {
      margin-left: 20px;
      margin-bottom: 20px;
      color: white;
    }
  }
  .selectBai {
    display: flex;
    > div {
      margin-right: 10px;
    }
  }
}

.tableMore {
  /deep/ .el-button--primary {
    color: black;
    background-color: initial;
    border-color: #e2e2e2;
  }
}
.tablesB,.tabsB{margin: 20px 2% 0;}

  .fenye{
    text-align: right;
    margin-top: 20px;   
    
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color: #02bf6b;
  }

  
  /deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}
/deep/ .el-dialog{
        width: 80% !important;
  }
</style>